import React from 'react'

class Products extends React.Component {
    componentDidMount(){
        // console.log(this.props)
        this.props.getProducts()
    }
    render(){
        // console.log(this.props)
        let { all,pushCart } = this.props // 容器组件映射过来
        return (
            <div>
                <h1>Products</h1>
                <h2>{this.props.foo}</h2>
                <ul>
                    {all.map((item) => {
                        return (
                            <li key={item.id}>
                                <span>{item.title}</span>
                                --
                                <b>${item.price}</b>
                                --
                                <b>{item.inventory}</b>
                                &nbsp;
                                &nbsp;
                                &nbsp;
                                &nbsp;
                                <button disabled={!item.inventory} onClick={() => pushCart(item)}>加入购物车</button>
                                {/* disabled={!item.inventory}：若库存减少到0，就禁用按钮的点击功能 */}
                            </li>
                        )              
                    })}
                </ul>
            </div>
        )
    }
}
export default Products